<template>
	<div class="custom-tree-node-container">
		<el-tree
			ref="treeCheck"
			:data="treeList"
			:show-checkbox="showCheckbox"
			:node-key="nodeKey"
			:check-on-click-node="checkOnClickNode"
			:default-expand-all="defaultExpandAll"
			:default-checked-keys="defaultCheckedKeys"
			:check-strictly="checkStrictly"
			:props="{ class: customNodeClass, ...props.props }"
			@check="handleCheck"
			@check-change="handleCheckChange"
		/>
	</div>
</template>

<script lang="ts" setup>
import Node from 'element-plus/es/components/tree/src/model/node';
import { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type';
import { ref, watch, onMounted, onUnmounted, inject } from 'vue';
import { axios } from '@/uni_modules/dx-admin/api/index';
import { arrayToTree } from '@/uni_modules/dx-admin/libs/utils';
const props = withDefaults(
	defineProps<{
		modelValue: any;
		nodeKey: string;
		showCheckbox?: boolean;
		defaultExpandAll?: boolean;
		url: string;
		funcName?: string;
		params?: any;
		props?: any;
		parentKey?: string;
		checkStrictly?: boolean;
		checkOnClickNode?: boolean;
	}>(),
	{
		nodeKey: 'id',
		showCheckbox: true,
		defaultExpandAll: true,
		funcName: 'dx-func-admin',
		parentKey: 'parent_id',
		checkStrictly: true,
		checkOnClickNode: false,
	}
);
const defaultCheckedKeys = ref<any>([]);
const treeList = ref<any>([]);
watch(
	() => props.modelValue,
	(newVal) => {
		defaultCheckedKeys.value = newVal || [];
	}
);
const $emit = defineEmits(['update:modelValue']);
watch(defaultCheckedKeys, (newVal) => {
	$emit('update:modelValue', newVal || []);
});
const treeCheck = ref<any>();
const customNodeClass = (data: TreeNodeData, node: Node) => {
	if (data.isPenultimate) {
		return 'is-penultimate';
	}
	return '';
};
const dxLayerFormShowId = inject('dxLayerFormShowId', '');
// 获取子节点id
function getChildIds(list: any) {
	let ids: any[] = [];
	list.forEach((item: any) => {
		ids.push(item[props.nodeKey]);
		if (item.children && item.children.length > 0) {
			ids = ids.concat(getChildIds(item.children));
		}
	});
	return ids;
}
function handleCheck(data: any, { checkedKeys }: any) {
	if(!props.checkStrictly) return;
	if (checkedKeys.includes(data[props.nodeKey])) {
		const childIds = getChildIds(data.children);
		console.log('childIds', childIds);
		checkedKeys = checkedKeys.concat(childIds);
		treeCheck.value.setCheckedKeys(checkedKeys);
	} else {
		const childIds = getChildIds(data.children);
		console.log('childIds', childIds);
		checkedKeys = checkedKeys.filter((item: any) => !childIds.includes(item));
		treeCheck.value.setCheckedKeys(checkedKeys);
	}
}
function handleCheckChange() {
	$emit('update:modelValue', treeCheck.value.getCheckedKeys());
}
const getTreeList = function () {
	axios.send(props.url, props.funcName, props.params).then(({ code, data, message }) => {
		if (code === 1000) {
			let list = arrayToTree(data, props.nodeKey, props.parentKey);
			const setPenultimateNode = (list: any) => {
				list.forEach((item: any) => {
					if (item.children && item.children.length > 0) {
						if (item.permission_type == 1 && item.children[0].permission_type == 2) {
							item.isPenultimate = true;
						}
						setPenultimateNode(item.children);
					}
				});
			};
			setPenultimateNode(list);
			treeList.value = list;
		} else {
			ElMessage.error(message);
		}
	});
};
getTreeList();
onMounted(() => {
	if (dxLayerFormShowId) uni.$on(dxLayerFormShowId, getTreeList);
});
onUnmounted(() => {
	if (dxLayerFormShowId) uni.$off(dxLayerFormShowId, getTreeList);
});
</script>

<style lang="scss" scoped>
.custom-tree-node-container{
	width: 100%;
}
::v-deep {
	.el-tree-node__content > .el-checkbox {
		margin-right: 8px;
	}
	.el-tree-node.is-penultimate > .el-tree-node__children {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.el-tree-node.is-penultimate > .el-tree-node__children > .el-tree-node {
		&:not(:first-child) {
			.el-tree-node__content {
				padding-left: 8px !important;
			}
		}
	}
}
</style>
